<template>
  <div class="add">
    <el-card>
      <el-icon><Tickets /></el-icon>数据列表
    </el-card>
  </div>
  <el-table
    :data="list"
    border
    table-layout="auto"
    cell-class-name="align-c"
    header-row-class-name="align-c"
  >
    <el-table-column label="编号" prop="id" />
    <el-table-column label="秒杀时间段名称" prop="name" />
    <el-table-column label="每日开始时间" prop="startTime">
      <template #default="{ row }">
        <span>{{ dateFormat(row.startTime) }}</span></template
      ></el-table-column
    >
    <el-table-column label="每日结束时间" prop="endTime">
      <template #default="{ row }">
        <span>{{ dateFormat(row.endTime) }}</span></template
      >
    </el-table-column>
    <el-table-column label="商品数量" prop="productCount" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button
          text
          type="primary"
          v-permission="'selectSession'"
          size="small"
          @click="flashList(row)"
          >商品列表</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import router from "@/router";
import { dateFormat } from "@/utils/index";
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { getSelectFlashListApi } from "./api";
const form = reactive({});
const list = ref<IFlashSession>();
const route = useRoute();
const flashPromotionId = route.query.flashPromotionId;
// console.log(id);

getSelectFlashListApi(parseInt(flashPromotionId as string)).then((res) => {
  console.log(res);
  list.value = res.data;
});

const flashList = (row: IFlashProduct) => {
  console.log(row.id);
  router.push(
    `/sms/flashProductRelation?flashPromotionId=${flashPromotionId}&flashPromotionSessionId=${row.id}`
  );
};
</script>

<style lang="less" scoped>
.add {
  margin: 20px 0;
  :deep(.el-card__body) {
    display: flex;
    position: relative;
    // flex-wrap: wrap;
    // justify-content: space-between;
    align-items: center;
  }
}
:deep(.align-c) {
  .cell {
    text-align: center !important;
    font-size: 12px;
  }
}
</style>
